<template>
  <div id='updata'>
    <div class='addinfo'>
      <div
        class='addinfo-top'>
        <h4>{{cominfo}}</h4>
        <span
          class='el-icon-close'
          @click='send'></span>
      </div>
      <div
        class='addinfo-bottom'>
        <template>
          <el-checkbox-group
            v-model="checkedrol"
            @change="handleCheckedCitiesChange">
            <el-checkbox
              v-for="(item,index) in rol"
              :label="item"
              :key="index">
              {{item}}
            </el-checkbox>
          </el-checkbox-group>
        </template>
        <button
          @click='update'>提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from '@/cookies/cookies'
export default {
  name: 'updata',
  data() {
    return {
      rol: [
        '/home',
        '/user',
        '/role',
        '/charts/bar',
        '/charts/line',
        '/charts/pie',
        '/products',
        '/category',
        '/product',
      ],
      checkedrol: [],
      checkAll: false,
      isIndeterminate: true,
    }
  },
  props: ['cominfo', 'rolinfo'],
  methods: {
    send() {
      this.flag = false
      this.$emit('func', this.flag)
    },
    update() {
      this.$axios({
        method: 'post',
        url: '/manage/role/update',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          menus: this.checkedrol.toString(),
          _id: this.rolinfo._id.toString(),
          auth_time: new Date().getTime(),
          auth_name: Cookie.getCookie().username,
        },
      }).then((res) => {
        if (res.status == 200) {
          this.$message.success('更新成功')
          this.$emit('func', this.flag)
          this.$emit('get')
        }
      })
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === this.rol.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.rol.length
    },
  },
  activated() {
    this.checkedrol = this.rolinfo.menus
  },
}
</script>

<style lang='less'>
.el-checkbox {
  width: 50%;
  text-align: left;
  margin: 0 auto;
  margin-bottom: 20px;
}
.el-checkbox:last-of-type {
  margin-right: 0;
  text-align-last: left;
}
.el-checkbox-group {
  margin-left: 30px;
  margin-bottom: 20px;
}
#updata {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;

  .addinfo {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    height: 360px;
    border-radius: 4px;
    background-color: #fff;
    margin: auto;
    .addinfo-top {
      width: 100%;
      height: 40px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.178);
      position: absolute;
      margin-bottom: 30px;

      h4 {
        color: rgb(100, 100, 100);
        position: absolute;
        top: 50%;
        left: 30px;
        height: 30px;
        margin: -15px;
        text-align: center;
        line-height: 30px;
      }
      .el-icon-close {
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 18px;
        cursor: pointer;
        color: rgb(144, 147, 153);
      }
    }
    .addinfo-bottom {
      width: 100%;
      height: 290px;
      position: absolute;
      left: 0;
      bottom: 0;
      padding: 0px 15px 10px 15px;
      box-sizing: border-box;
      text-align: center;
      .infobox {
        width: 330px;
        text-align: right;
        margin-bottom: 20px;
        span {
          color: #646464;
          font-size: 16px;
          font-weight: 600;
        }
        input {
          outline: none;
          width: 160px;
          height: 25px;
          border: 1px solid #cbcbcb;
        }
      }
      button {
        width: 120px;
        height: 30px;
        outline: none;
        border: none;
        border-radius: 4px;
        background: rgb(64, 158, 255);
        cursor: pointer;
        color: #fff;
      }
    }
  }
}
</style>